@import "mixins/mixins";
@import "common/var";
@import "_main";

@include b(mbr) {
  @include e(bg) {
    background-color: #f5f5f5;
  }
  @include e(header) {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 13px 16px 18px;
    border-top: 1rpx solid #cbcbcb;
    border-bottom: 10px solid #f5f5f5;
    background-color: #fff;
  }

  @include e(avatar) {
    width: 65px;
    height: 65px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    & image {
      width: 100%;
      height: 65px;
    }
  }

  @include e(info) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #414141;
    margin-left: 14px;
    & .desc {
      margin-top: 10px;
      font-size: 13px;
      color: #d7d7d7;
    }

    & navigator {
      & image {
        width: 20px;
        height: 20px;
      }
    }
  }

  @include e(content) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
    background-color: #fff;
    padding-bottom: 30px;
    @include e(item) {
      padding-top: 30px;
      flex: 0 0 33%;
      & image {
        width: 38px;
        height: 38px;
      }

      font-size: 15px;
      color: #414141;
    }
  }
}
